{% extends "base.html" %}
{% block title %}Edit Provider{% endblock %}
{% block head %}
	<script language="javascript" type="text/javascript" src="/scripts/edit_area/edit_area_full.js"></script>
	<script language="javascript" type="text/javascript" src="/scripts/tabs.js"></script>
   	<script language="javascript" type="text/javascript">
		function test_code() {
		    code = editAreaLoader.getValue('code');
		    input = $('#test_input').val();
		    $.ajax({
		        type: 'POST',
		        url: "/handlers/testcode",
		        context: document.body,
		        data: {
		            'code': code,
		            'input': input
		        },
		        success: function (output) {
		            $('#last_output').val(output);
		            $("ul.css-tabs > li > a").first().click();
		        }
		    });
		}
		
		function save() {
		    $("input[value='Save']").click();
		}
		
		function keyboard_event(event) {
			checkTab(event);
	        if (event.which == 13 && event.shiftKey) {
	            test_code();
	            event.preventDefault();
	        }
	        if (event.which == 115 && event.altKey) {
	        	save();
	        	event.preventDefault();
	        }
		}
		
		$(document).ready(function () {
		    $('#code').disabled = true;
		    
		    editAreaLoader.init({
		        id: "code",
		        syntax: "python",
		        start_highlight: true,
		        plugins: "testcode",
		        allow_toggle: false,
		        min_width: 380
		    });
		    
		    $(".css-tabs").tabs(".css-panes > textarea");
		    $('#code').keydown(keyboard_event);
		    $('#test_input').keydown(keyboard_event);
		});
	</script>
	
	<link type="text/css" rel="stylesheet" href="/stylesheets/tabs.css" />
	<style type="text/css">
		#code-pane {
			clear: both;
			float: left;
			width: 780px;
			padding: 5px 0px 5px 0px;
		}
		
		#io-pane {
			clear: both;
			float: left;
			width: 780px;
			padding: 5px 0px 5px 0px;
		}
		
		textarea {
			float: left;
			resize: none;
			height: 310px;
			padding: 10px;
			margin: 0;
			width: 760px;
		}
		
		.css-panes textarea {
			height: 180px;
			border: 1px solid #666;
			border-width: 0 1px 1px 1px;
			min-height: 150px;
			padding: 10px;
			width: 760px;
			margin-top: 0px;
		}	
	</style>
{% endblock %}
{% block form_open %}<form method="POST" action="" name="provider">{% endblock %}
{% block content %}
	<div id="properties">
		<div class="property">{{form.name.label}} {{form.name}}</div>
	</div>
	<div id="io-pane" >
		{{form.code()}}
	</div>
	<div id="code-pane" >
		<ul class="css-tabs">
			<li><a href="#">Output</a></li>
			<li><a href="#">Input</a></li>
		</ul>
		<div class="css-panes">
			{{form.last_output(readonly="readonly")}}
			{{form.test_input}}
		</div>
	</div>
{% endblock %}
{% block footer %}
	<input type="submit" name="run" value="Run" />
	<input type="button" onclick="test_code()" value="Test" />
	<input type="submit" name="save" value="Save" />
	<input type="button" onclick="window.location.href='/provider/list'" value="List" /> 
{% endblock %}
{% block form_close %}</form>{% endblock %}